//1找元素，图片
let arr = ['../img/f7.jpg',
    '../img/f8.jpg',
    '../img/f9.jpg',
    '../img/f10.jpg'
]
//获得我要发帖按钮
let btn = document.querySelector('#app>.btn-wrap>.btn')
//获得form组合
let formGroup = document.querySelector('.form-group')
//获得发布按钮
let pubBtn = document.querySelector('.pub-btn')
//获得标题输入框
let formTitle = document.querySelector('.form-title')
//获得select的值
let formPlate = document.querySelector('.form-plate')
//获得ul的值
let ul = document.querySelector('.comment-list>ul')
//获得form-content
let formContent = document.querySelector('.form-content')
//2.给我要发帖绑定点击事件
btn.onclick = function () {
    formGroup.style.display = 'block'
}
//3.给发布按钮绑定点击事件
pubBtn.onclick = function () {
    let flag = appendLi()
    if (!flag) {
        return
    }
    removeLi()
    collect()
    formGroup.style.display = 'none'
}
//4.格式化时间的函数
function getFormatTime() {
    let date = new Date()
    let year = date.getFullYear()
    let month = (date.getMonth() + 1 + '').padStart(2, '0')
    let day = (date.getDate() + '').padStart(2, '0')
    let hour = (date.getHours() + '').padStart(2, '0')
    let min = (date.getMinutes() + '').padStart(2, '0')
    let sec = (date.getSeconds() + '').padStart(2, '0')
    return (`${year}-${month}-${day} ${hour}:${min}:${sec}`)
}
//5.获得随机头像的值
function getImgSrc() {
    let index = Math.floor(Math.random() * arr.length)
    return arr[index]
}
//6.拼接li
function appendLi() {
    //获得标签输入框的值
    let titleValue = formTitle.value
    if (!titleValue) {
        alert('标题不能为空')
        return false
    }
    // console.log(titleValue)
    //获得select的值
    let plateValue = formPlate.value
    if (!plateValue) {
        alert('板块的内容不能为空')
        return false
    }
    //获得图片的src
    let src = getImgSrc()
    //获得时间
    let time = getFormatTime()
    //创建一个元素li
    let li = document.createElement('li')
    //li的内容
    let str = `<!-- 左边的图片 -->
            <div class="img-wrap">
              <img src="${src}" alt="" title="头像" class="comment-img" />
            </div>
               <!-- 中间信息 -->
            <div class="msg">
             <h3 class="title">${titleValue}</h3>
             <div class="plate">
               板块:<span>${plateValue}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                发布时间：<span>${time}</span>
            </div>
           </div>
             <!-- 右边操作 -->
             <div class="operate">
                 <button class="delete">删除</button>
                 <button class="collect">收藏</button>
             </div>`
    li.innerHTML = str
    //把li放到ul里
    let ul = document.querySelector('.comment-list>ul')
    let fisrtElement = ul.firstElementChild
    if (!fisrtElement) {
        ul.appendChild(li)
    } else {
        ul.insertBefore(li, fisrtElement)
    }
    restetForm()
    return true
}
//7.重置表单
function restetForm() {
    //把form-title置空
    formTitle.value = ''
    //板块置空   （让板块的第一个元素被选中）
    let options = formPlate.children
    options[0].selected = true
    //form-content置空
    formContent.value = ''
}
//8.删除li操作
function removeLi() {
    let del = document.querySelectorAll('.delete')
    for (let i = 0; i < del.length; i++) {
        del[i].onclick = function () {
            //确认框
            let flag = confirm('确定要删除吗')
            if (!flag) {
                alert('取消删除成功')
                return
            }
            let li = del[i].parentNode.parentNode
            let ul = li.parentNode
            ul.removeChild(li)
        }

    }
}
//9.收藏
function collect() {
    let col = document.querySelectorAll('.collect')
    for (let i = 0; i < col.length; i++) {
        col[i].onclick = function () {
            alert('收藏成功！')
        }
    }
}